<template>
  <div>
    <el-radio-group v-model="form.link_type">
      <el-form ref="link_form" :model="form" label-position="left" label-width="160px" size="mini" :rules="rules">
        <el-form-item>
          <template v-slot:label>
            <el-radio :label="1">跳转到指定内容</el-radio>
          </template>
          <div v-show="form.link_type == 1" class="advert-item__course">
            <div class="course-add">
              <el-button type="primary" size="mini" @click="chooseCourse">{{ form.link_data_id > 0 ? '重新选择' : '选择课程' }}</el-button>
            </div>
            <div v-if="form.link_data_id > 0" class="course-del">
              <span class="text">已选课程：{{ formDatas.link_data_info ? formDatas.link_data_info.title : '' }}</span>
              <!--<i class="el-icon-close close"></i>-->
            </div>
          </div>
          <!--<choose-course v-show="form.link_type == 1" :value.sync="form.link_data_id" :field="field" :form-datas="formDatas" @update:type="updateType" />-->
        </el-form-item>
        <el-form-item prop="link_href">
          <template v-slot:label>
            <el-radio :label="2">跳转到指定链接</el-radio>
          </template>
          <edu-input v-show="form.link_type == 2" :value.sync="form.link_href" :args="{ placeholder: '请输入完整的链接地址' }" />
        </el-form-item>
        <el-form-item>
          <template v-slot:label>
            <el-radio :label="0">不跳转</el-radio>
          </template>
        </el-form-item>
      </el-form>
    </el-radio-group>
    <!-- 选择课程 start-->
    <choose-course-dialog
      v-if="chooseCourseVisible"
      :visible.sync="chooseCourseVisible"
      :limit="1"
      :list="attachList"
      @submit="setCurrentItemCourse"
    ></choose-course-dialog>
    <!-- 选择课程 end-->
  </div>
</template>

<script>
import EduInput from '@public/form/input';
import ChooseCourseDialog from '@/pages/course/components/ChooseCourseDialog'

export default {
  components: {
    EduInput,
    ChooseCourseDialog
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    field: {
      type: String,
      required: true,
      default: ''
    },
    formDatas: {
      type: Object,
      required: true,
      default: _ => {
        return {};
      }
    }
  },
  data() {
    return {
      form: {
        link_type: this.value.link_type,
        link_data_type: this.value.link_data_type,
        link_data_id: this.value.link_data_id,
        link_href: this.value.link_href
      },
      rules: {
        link_href: [
          {
            validator: (rule, value, callback) => {
              const reg = /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?/;
              if (!reg.test(value)) {
                return callback(new Error('请填写有效的链接地址'));
              }
              callback();
            },
            trigger: ['blur', 'change']
          }
        ]
      },
      chooseCourseVisible: false
    };
  },
  computed: {
    attachList() {
      let courseList = []
      if (this.formDatas.links.link_type === 1 && this.formDatas.links.link_data_id > 0) {
        courseList = [
          {
            title: this.formDatas.link_data_info ? this.formDatas.link_data_info.title : '',
            value: this.formDatas.links.link_data_id
          }
        ]
      }

      return courseList
    }
  },
  watch: {
    // 更新
    form: {
      handler(links) {
        this.$emit('update:value', links);
      },
      deep: true
    },
    'form.link_type': {
      handler(type) {
        if (type == 2 && this.form.link_href != '') {
          this.$refs['link_form'].validate();
        } else {
          this.$refs['link_form'].clearValidate();
        }
      }
    }
  },
  methods: {
    chooseCourse() {
      this.chooseCourseVisible = true
    },
    setCurrentItemCourse(value, course) {
      const currentCourse = course.length > 0 ? course[0] : {}
      this.form.link_data_id = currentCourse.value
      this.$set(this.formDatas, 'link_data_info', {})
      this.formDatas.link_data_info.title = currentCourse.title
      this.form.link_data_type = currentCourse.course_type
      this.chooseCourseVisible = false
    }
    // updateType: function(value) {
    //   this.$set(this.form, 'link_data_type', value);
    // }
  }
};
</script>

<style scoped lang="scss">
.type-item {
  min-height: 32px;
}

.advert-item__course {
//margin-top: 10px;

  .course-add {
    display: flex;
    align-items: center;

    .text {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      margin-right: 10px;
    }
  }

  .course-del {
  //margin-left: 66px;
    margin-top: 10px;
    display: flex;
    align-items: center;

    .text {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      margin-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .close {
      font-size: 12px;
      color: #8c8c8c;
      cursor: pointer;
    }
  }
}
</style>
